<template>
  <div class="test_box" id="main" style="width:80%;height:80%;">Test page</div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: "test",
    data() {
      return {};
    },
    mounted() {
      this.drawBar();
    },
    methods: {
      drawBar: function () {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById("main"));
        let option = {
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
          },
          yAxis: {
            type: "value"
          },
          series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar"
          }]
        };
        //  使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
        // myChart.setOption(option);
        // window.addEventListener("resize", function () {
        //  myChart.resize();
        // });

        //  当窗口或者大小发生改变时执行resize，重新绘制图表
        window.onresize = myChart.resize;
      }
    }
  };

</script>
<style scoped>
  .test_box {
    background-color: #beb9b9;
    margin: 10px auto;
  }

</style>
